<template>
  <div class="article_content">
    <el-row :gutter="10" class="grid-content">
      <el-col :span="1.5">
        <el-button
          class="article_add"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:add']"
          @click="handleAdd"
        >
          &nbsp;&nbsp;&nbsp;&nbsp;新增文章
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-tooltip
          class="item"
          effect="dark"
          content="Top Center 提示文字"
          placement="top"
          v-if="false"
        >
          <el-button
            class="article_cut"
            type="cyan"
            size="mini"
            v-hasPermi="['system:article:remove']"
            @click="handleDel"
            >删除</el-button
          >
        </el-tooltip>
        <el-button
          class="article_cut"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:remove']"
          @click="handleDel"
          >删除</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button class='article_settop' type="cyan"     size="mini" @click="handleTop"  >置顶</el-button>
      </el-col> -->
      <el-col :span="1.5" v-if="false">
        <el-button
          class="article_tip"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:edit']"
          @click="handleJump"
          >弹出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_move"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:move']"
          @click="handleCopy('文章移动')"
          >文章移动</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_copy"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:copy']"
          @click="handleCopy('文章复制')"
          >文章复制</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_copy"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:share']"
          @click="handleCopy('文章分享')"
          >文章分享</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_cut"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:share']"
          @click="handleCancleShare()"
          >取消分享</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_setting"
          type="cyan"
          size="mini"
          @click="handleSet"
          v-hasPermi="['system:channel:edit']"
          >流程设置</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          class="article_export"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:export']"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_move"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:export']"
          @click="handleChnnelCopy('栏目移动')"
          >栏目移动</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_export"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:export']"
          @click="handleChnnelCopy('栏目复制')"
          >栏目复制</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_export"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:export']"
          @click="handleExportWorkflow('栏目复制')"
          >导出审核记录</el-button
        >
      </el-col>
      <el-col :span="1.5" v-if="['yc'].includes(city_name)">
        <el-button
          class="article_export"
          type="cyan"
          size="mini"
          @click="handlePkgDown('栏目复制')"
          >打包下载</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="cyan" size="mini" @click="showSearch = !showSearch">{{
          showSearch ? "隐藏搜索" : "显示搜索"
        }}</el-button>
      </el-col>
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getArticleList"></right-toolbar> -->
    </el-row>
    <div class="content-wrap my-search" v-show="showSearch">
      <el-form
        :model="queryParams"
        size="mini"
        ref="queryForm"
        :inline="true"
        label-width="50px"
      >
        <el-form-item label="作者" prop="author">
          <el-input
            v-model="queryParams.author"
            placeholder="请输入作者名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            style="width: 140px"
          />
        </el-form-item>
        <el-form-item label="标题" prop="header">
          <el-input
            v-model="queryParams.header"
            placeholder="请输入标题"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="账号" prop="loginId" v-if="false">
          <el-input
            v-model="queryParams.loginId"
            placeholder="请输入账号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="分类">
          <el-select
            v-model="queryParams.showType"
            placeholder="请选择文章分类"
            size="small"
            style="width: 160px"
          >
            <el-option
              v-for="dict in articleOption"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 220px"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <!-- <el-button icon="el-icon-refresh" size="mini" @click="showSearch = false">关闭搜索</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- <div style="flex:1" ref="el_table"> -->
    <el-table
      :data="articleList"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
      highlight-current-row
      :row-class-name="tableRowClassName"
      @row-contextmenu="handleRowContextmenu"
      :height="0"
    >
      <el-table-column
        type="selection"
        width="45"
        align="center"
        :selectable="selectFn"
      />
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="left"
        v-if="false"
      />

      <el-table-column
        label="标题"
        align="left"
        prop="header"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span
            @click="getArticleUrl(scope.row)"
            style="color: #009a94; cursor: pointer"
            >{{ scope.row.header }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="作者" align="center" prop="author1" width="120" />
      <el-table-column
        label="状态"
        align="center"
        prop="workflowStatuId"
        width="120"
        show-overflow-tooltip
        :formatter="articleStatusFormat"
      />

      <el-table-column
        label="投稿发送时间"
        align="center"
        prop="createdDate"
        width="160"
      >
      </el-table-column>

      <el-table-column
        label="发布期限"
        align="center"
        prop="expiredDate"
        width="100"
        v-if="false"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.expiredDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="编辑"
        align="center"
        prop="createBy"
        width="80"
        v-hasPermi="['system:article:edit']"
        v-if="false"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            :disabled="scope.row.relevance == 2"
            v-hasPermi="['system:article:edit']"
            >编辑</el-button
          >
          <!-- <el-button size="mini" icon="el-icon-upload2" @click="handleUp(scope.$index,scope.row,)" > </el-button>
          <el-button size="mini" icon="el-icon-download" @click="handleDown( scope.$index,scope.row,)" > </el-button> -->
        </template>
      </el-table-column>
      <el-table-column
        label="排序(降序)"
        align="center"
        prop="expiredDate"
        width="110"
        v-hasPermi="['system:article:move']"
        v-if="false"
      >
        <!-- <template slot-scope="scope"> -->
        <!-- <span>{{scope.row.sequence}}</span> -->
        <template slot-scope="scope">
          <span v-if="scope.row.show">
            <el-row>
              <el-col :span="15">
                <el-input
                  ref="sequence"
                  v-if="scope.row.show"
                  placeholder="请输入内容"
                  v-model="scope.row.sequence"
                  autofocus
                ></el-input>
              </el-col>
              <el-col :span="4">
                <span @click="commitSequence(scope.row)">
                  <i class="el-icon-check" style="padding: 10px 0"></i>
                </span>
              </el-col>
              <el-col :span="4" :push="1">
                <span @click="quxiaoSequence(scope.row)">
                  <i class="el-icon-close" style="padding: 10px 0"></i>
                </span>
              </el-col>
            </el-row>
          </span>
          <span v-if="!scope.row.show" @click="handleClick(scope.row)">{{
            scope.row.sequence
          }}</span>
        </template>
        <!-- </template> -->
      </el-table-column>

      <el-table-column
        label="排序(降序)"
        align="center"
        prop="time"
        width="190"
        v-hasPermi="['system:article:edit']"
      >
        <!-- <template slot-scope="scope"> -->
        <!-- <span>{{scope.row.sequence}}</span> -->
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.time"
            type="datetime"
            placeholder="选择日期时间"
            @change="handleArticleTimeChange(scope.row)"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            size="mini"
            style="width: 100%"
          >
          </el-date-picker>
        </template>
        <!-- </template> -->
      </el-table-column>

      <el-table-column
        label="置顶"
        align="center"
        prop="setTop"
        width="100"
        v-hasPermi="['system:article:edit']"
        v-if="false"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.setTop == '1'"
            @click="handleTop(scope.row)"
            style="cursor: pointer"
          >
            取消置顶
            <img src="http://192.168.1.22:8003/images/SymbolCheck.png" alt="" />
          </span>
          <span v-else @click="handleTop(scope.row)" style="cursor: pointer">
            置顶
            <img
              src="http://192.168.1.22:8003/images/SymbolDelete.png"
              alt=""
            />
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="弹出"
        align="center"
        prop="createBy"
        width="100"
        v-hasPermi="['system:article:edit']"
        v-if="false"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleJump(scope.row)"
            :disabled="scope.row.relevance == 2"
          >
            {{ scope.row.jump == "1" ? "取消弹出" : "弹出" }}
            <i
              :class="
                scope.row.jump == '1'
                  ? 'iconfont icon-B icon_wancheng'
                  : 'iconfont icon-B1 icon_guanbi'
              "
            ></i>
          </el-button>

          <!-- <span v-if="scope.row.jump=='1'" @click="handleJump(scope.row)" style="cursor: pointer;" :disabled='scope.row.relevance==2'>
            取消弹出
            <i class="iconfont icon-B icon_wancheng"></i>
          </span>
          <span v-else @click="handleJump(scope.row)" style="cursor: pointer;" :disabled='scope.row.relevance==2'>
            弹出
            <i class="iconfont icon-B1 icon_guanbi  "></i>
          </span> -->
        </template>
      </el-table-column>
      <el-table-column
        label="共享"
        align="center"
        prop="relevance"
        width="100"
        v-hasPermi="['system:article:share']"
      >
        <template slot-scope="scope">
          <!-- <span v-if="scope.row.jump=='1'" @click="handleShare(scope.row)" style="cursor: pointer;"> -->
          <template v-if="scope.row.relevance == '1'">
            <el-popover
              placement="right"
              width="400"
              trigger="click"
              :openDelay="1000"
            >
              <h3
                class="padding-content mb10 mt5"
                style="
                  text-align: center;
                  height: 40px;
                  line-height: 40px;
                  fontsize: 16px;
                  padding: 0;
                  border-bottom: 1px solid #ccc;
                "
              >
                共享栏目
              </h3>
              <ul class="share-channel-list">
                <li
                  class="channel-name"
                  v-for="item in shareChannelList"
                  :key="item.channelId"
                >
                  {{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;
                  <!-- <el-popover placement="right" width="400" trigger="focus">
                        aaaa
                        <el-link type="primary" slot="reference" @mouseenter="(item)">  </el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                      </el-popover> -->
                </li>
                <i></i>
                <i></i>
                <i></i>
              </ul>
              <el-button
                icon="el-icon-search"
                size="mini"
                type="text"
                slot="reference"
                @click="shareView(scope.row)"
              >
                查看
                <!-- <img src="http://192.168.1.22:8003/images/SymbolCheck.png" alt=""> -->
              </el-button>
            </el-popover>
          </template>
          <template v-if="scope.row.relevance == '2'"> 来自其他 </template>
          <!-- <span v-else @click="handleCopy('文章共享')" style="cursor: pointer;"> -->
          <span v-if="scope.row.relevance == '0'" style="cursor: pointer">
            -
            <!-- 共享
            <i class="iconfont icon-B1 icon_guanbi "></i> -->
            <!-- <img src="http://192.168.1.22:8003/images/SymbolDelete.png" alt=""> -->
          </span>
        </template>
      </el-table-column>
      <el-table-column label="转发" align="center" width="90" v-if="false">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="copyContent"
            placement="top"
          >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-share"
              @click="copyArticleUrl(scope.row)"
              @mouseenter.native="copyContent = '复制到剪贴板'"
              >复制链接</el-button
            >
          </el-tooltip>
          <!-- <el-button size="mini" icon="el-icon-upload2" @click="handleUp(scope.$index,scope.row,)" > </el-button>
          <el-button size="mini" icon="el-icon-download" @click="handleDown( scope.$index,scope.row,)" > </el-button> -->
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="155"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            :disabled="scope.row.relevance == 2"
            v-hasPermi="['system:article:edit']"
            >编辑</el-button
          >

          <el-dropdown
            size="mini"
            @command="(command) => handleCommand(command, scope.row)"
            trigger="click"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="copyArticleUrl" icon="el-icon-share"
                >复制链接</el-dropdown-item
              >
              <el-dropdown-item
                command="handleCacleTop"
                icon="el-icon-close"
                v-hasPermi="['system:article:edit']"
                v-if="scope.row.setTop == '1'"
              >
                取消置顶</el-dropdown-item
              >
              <el-dropdown-item
                command="handleTop"
                icon="el-icon-top"
                v-hasPermi="['system:article:edit']"
                v-else
                >文章置顶</el-dropdown-item
              >
              <el-dropdown-item
                command="handleExportWorkflow"
                icon="el-icon-download"
                v-hasPermi="['system:article:edit']"
                >导出流程</el-dropdown-item
              >
              <!-- <el-button size="mini" type="text" icon="el-icon-share" @click='copyArticleUrl(scope.row)' @mouseenter.native='copyContent="复制到剪贴板"'>复制链接</el-button> -->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- </div> -->
    <!-- <el-button type="cyan" @click="aaaaa">确 定</el-button> -->

    <pagination
      v-show="total >= 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getArticleList"
    />
    <!-- 表格右键列表 -->
    <!-- <ContextButton :visible.sync="menuVisible" ref="contextbutton" @handleMenu="handleMenu" v-show="false"></ContextButton> -->

    <!-- 文章移动复制    流程复制 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogCloumn"
      width="450px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleCloseDialog"
    >
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-button @click="$refs.xTree_article.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree_article.clearTreeExpand()"
                >全部关闭</vxe-button
              >
            </template>
          </vxe-toolbar>
          <vxe-toolbar>
            <template #buttons>
              <vxe-radio-button
                v-model="value7"
                :label="true"
                v-if="false"
                :content="value7 ? '全部关闭' : '全部展开'"
                :strict="false"
                size="mini"
                :disabled="!siteRow"
              ></vxe-radio-button>
            </template>
          </vxe-toolbar>

          <vxe-table
            highlight-current-row
            :show-header="false"
            highlight-hover-row
            show-overflow
            ref="xTree_article"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            :checkbox-config="{
              labelField: 'name',
              checkStrictly: true,
              checkMethod,
            }"
            class="left-table"
            :row-key="true"
            row-id="idd"
          >
            <vxe-column type="checkbox" tree-node show-overflow>
              <template #default="{ row }">
                <span>
                  <template v-if="row.children && row.children.length">
                    <i
                      class="tree-node-icon fa"
                      :class="
                        $refs.xTree_article.isTreeExpandByRow(row)
                          ? 'fa-folder-open-o'
                          : 'fa-folder-o'
                      "
                    ></i>
                  </template>
                  <template v-else>
                    <i class="tree-node-icon fa fa-file-o"></i>
                  </template>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="copySureArticle">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 栏目移动复制 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogChannel"
      width="450px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleCloseDialog"
    >
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-button @click="$refs.xTree_article.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree_article.clearTreeExpand()"
                >全部关闭</vxe-button
              >
            </template>
          </vxe-toolbar>
          <vxe-toolbar>
            <template #buttons>
              <vxe-radio-button
                v-model="value7"
                :label="true"
                v-if="false"
                :content="value7 ? '全部关闭' : '全部展开'"
                :strict="false"
                size="mini"
                :disabled="!siteRow"
              ></vxe-radio-button>
            </template>
          </vxe-toolbar>
          <vxe-table
            highlight-current-row
            :show-header="false"
            highlight-hover-row
            show-overflow
            ref="xTree_article"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            :radio-config="{ labelField: 'name', checkStrictly: true }"
            class="left-table"
            :row-key="true"
            row-id="idd"
          >
            <vxe-column type="radio" tree-node show-overflow>
              <template #default="{ row }">
                <span>
                  <template v-if="row.children && row.children.length">
                    <i
                      class="tree-node-icon fa"
                      :class="
                        $refs.xTree_article.isTreeExpandByRow(row)
                          ? 'fa-folder-open-o'
                          : 'fa-folder-o'
                      "
                    ></i>
                  </template>
                  <template v-else>
                    <i class="tree-node-icon fa fa-file-o"></i>
                  </template>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="copySureChannel">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 流程设置 -->
    <el-drawer
      :visible.sync="drawer_setting"
      :before-close="handleClose"
      size="50%"
      custom-class="drawer-wrap"
    >
      <span slot="title">栏目流程设置</span>
      <div class="set_top content-wrap">
        <span>
          栏目 《 <font color="red"> {{ columnRow.name }}</font
          >》 已配置文件流程 ：
          <font color="blue" style="text-indent: 2em; fontsize: 20px">{{
            workflowDetail.workflowName
          }}</font>
        </span>

        <h3 style="height: 30px; line-height: 30px">
          <font color="red"> 流程的详细配置信息：</font>
        </h3>
        <strong
          v-if="
            workflowDetail.workFlowVoList &&
            workflowDetail.workFlowVoList.length == 0
          "
        >
          {{ workflowDetail.workflowName }}
        </strong>
        <div class="boxxxx" style="overflow: auto" v-else>
          <ul class="reset-steps">
            <li
              v-for="(item, index) in workflowDetail.workFlowVoList"
              :key="index"
              :class="item.wfName != '结束' ? 'step-item' : 'step-item2'"
            >
              <span class="name">{{ item.wfName }}</span>
              <div class="set" v-if="!ifShowSetList.includes(item.wfName)">
                <template>
                  <ul class="userList">
                    <li style="color: #000">人员名单 ：</li>
                    <li
                      v-if="
                        !(item.personVoList && item.personVoList.length > 0)
                      "
                    >
                      <font color="blue"> 使用系统默认配置!</font>
                    </li>
                    <li
                      v-for="userItem in item.personVoList"
                      :key="userItem.userId"
                      @mouseenter="userId = userItem.userId"
                      @mouseleave="userId = null"
                    >
                      {{ userItem.name }}({{ userItem.loginId }})
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <!-- <el-popover placement="right" width="400" trigger="focus">
                        aaaa
                        <el-link type="primary" slot="reference" @mouseenter="(userItem)">  </el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                      </el-popover> -->
                      <el-popconfirm
                        confirm-button-text="好的"
                        cancel-button-text="不用了"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确定删除该用户吗？"
                        @confirm="delUser(userItem, item)"
                        v-hasPermi="['system:channel:edit']"
                        style="display: inline-block"
                      >
                        <!-- <i slot="reference" :class="userId==userItem.userId?'el-icon-error':'el-icon-close'"></i> -->
                        <img
                          slot="reference"
                          src="../../../../assets/images/wrong.png"
                          alt=""
                          style="vertical-align: bottom"
                        />
                      </el-popconfirm>
                      ,
                    </li>
                    <li>
                      <el-button
                        @click="setFlowPeople(item)"
                        type="primary"
                        size="mini"
                        v-hasPermi="['system:channel:edit']"
                        >配置人员</el-button
                      >
                    </li>
                    <i></i>
                    <i></i>
                    <i></i>
                  </ul>
                  <!-- <el-link slot="reference" type="cyan" style="display:block;fontSize:14px">人员名单: <i class="el-icon-view el-icon--right"></i> </el-link> -->
                </template>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="set_bottom content-wrap">
        <template v-hasPermi="['system:channel:edit']">
          <el-divider content-position="left">
            以下为重新为栏目选择流程区域：</el-divider
          >
          <span>
            重新为本栏目选择流程：
            <el-select v-model="setWorkflowId" placeholder="请选择" size="mini">
              <el-option
                v-for="dict in flowOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <el-button type="cyan" @click="saveLiuchengSet" size="mini"
              >保存</el-button
            >
          </span>
        </template>
        <template v-hasPermi="['system:channel:edit']">
          <div style="margin: 10px 0" v-hasPermi="['system:channel:query']">
            将此栏目配置的流程信息
            <font color="red">（包括流程各步骤人员）</font>共享到其他栏目：
            <el-button @click="setShareFlow" size="mini">选择栏目</el-button>
          </div>
        </template>
      </div>
    </el-drawer>
    <!-- 配置人员选择 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogUser"
      width="700px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="bottom">
        <div class="bottom_l">
          <el-input
            v-model="query"
            size="small"
            clearable
            placeholder="通过用户姓名、用户名进行查询"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <span slot="suffix" class="el-input__count"
              >{{ checkUserList.length }}/{{ allUserList.length }}</span
            >
          </el-input>
          <el-checkbox-group v-model="checkUserList" class="left-table">
            <el-checkbox
              :label="item.userId"
              v-for="item in filteredData"
              :key="item.userId"
            >
              {{ item.name }}-({{ item.loginId }})
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button
          type="primary"
          @click="sureSetFlowPeople"
          v-hasPermi="['system:channel:edit']"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 运城打包下载 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="pkgDownOpen"
      width="400px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="packDownFormRef"
        :rules="pckDownRules"
        :model="pckDownForm"
        label-width="80px"
        size="small"
      >
        <el-form-item label="文件名称" prop="fileName">
          <el-input v-model="pckDownForm.fileName"></el-input>
        </el-form-item>
        <el-form-item label="图片类型" prop="type">
          <el-radio-group v-model="pckDownForm.type">
            <el-radio label="0">下载压缩图</el-radio>
            <el-radio label="1">下载原图</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pkgDownSubmit">确认下载</el-button>
      </div>
    </el-dialog>

    <!-- <Tour></Tour> -->
  </div>
</template>

<script>
import { articleViewUrl } from "@/api/content/mywork";
import {
  getListArticle,
  getArticleOption,
  articleCopy,
  articleMove,
  articleSetTop,
  articleSetJump,
  articleRemove,
  getArticleWorkFlowExport,
  moveUpArticle,
  moveDownArticle,
  workFlowConfig,
  workflowUserList,
  shareWFToOtherChannel,
  saveWorkflowUser,
  saveNewWorkflow,
  refreshUserEditStatus,
  deleteArticleRelevance,
  seeArticleSharedChannels,
  shareArticle,
  setArticleSequence,
  exportArticle,
  setArticleSeqTime,
  getPckDown,
  articleStatusList,
} from "@/api/content/article";
import { getUser } from "@/api/system/user";
import {
  getChannelListForTree,
  getChannelListAppendList,
  removeTemplate,
  moveUserFormWF,
  channelMove,
  channelCopy,
} from "@/api/content/clounm";
import { refreshRouteArr } from "@/settings.js";
import { checkRole } from "@/utils/permission.js";

import { mountedToBody, getAbsolutePos } from "@/utils/mountedToBody.js";

import ContextButton from "@/components/contextButton";
import Tour from "@/components/tour/index.vue";
export default {
  props: {
    netRow: {
      type: Object,
      require: true,
    },
    siteRow: {
      type: Object,
      require: true,
    },
    columnRow: {
      type: Object,
      default: () => {
        return undefined;
      },
      require: true,
    },
    workflowId: {
      String,
    },
    siteList: {},
  },
  inject: ["city_name"],
  data() {
    return {
      // 表格右键菜单
      menuVisible: false,
      // 哪些不需要 配置人员按钮
      ifShowSetList: ["开始", "结束", "草稿", "发起人", "发起人发布"],
      // Tbheight: 500,
      copyContent: "复制到剪贴板",
      //全部展开 全部关闭
      value7: false,
      refresh: null,
      // 表格loading
      loading: false,
      // 选中文章数组  已经join为字符串   ,
      articleId: "",
      // 选中对话框中的栏目数组
      cloumnId: [],

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      leftList: [],
      // 弹出层标题
      title: "",

      // 文章移动  文章复制
      dialogCloumn: false,

      // 栏目移动  栏目复制
      dialogChannel: false,

      // 文章移动  文章复制  同一个方法调接口
      dialogType: undefined,

      // 查询参数
      queryParams: {
        showType: "2",
        loginId: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      // 日期范围
      dateRange: [],
      // 文章状态数据字典
      articleOption: [],
      //文章列表
      articleList: [],
      //文章状态
      articleStatusOption: [],
      //当前行下标
      currentRowIndex: null,
      //上一行或下一行  文章移动时
      otherCloumn: {},

      //流程设置窗口
      drawer_setting: false,
      //当前栏目流程设置详情
      workflowDetail: {},
      //下拉框 选中得流程
      setWorkflowId: undefined,
      //流程配置字典
      flowOptions: [],
      //流程管理中 人员名单中 鼠标移入对应的userid
      userId: null,
      //流程 中人员配置  流程id
      setWorkFlowDetail: {},
      //配置人员中      流程定义中的可选择人员
      allUserList: [],
      //配置人员
      dialogUser: false,
      //选中的配置人员
      checkUserList: [],
      //筛选输入框
      query: "",
      //当前行的 文章排序
      rowSequenceCache: undefined,

      //文章共享的栏目
      shareChannelList: [],

      pckDownRules: {
        fileName: [
          { required: true, message: "请输入文件名", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择图片类型", trigger: "blur" }],
      },
      pckDownForm: {},
      // 运城打包下载
      pkgDownOpen: false,
    };
  },

  components: { ContextButton, Tour },

  computed: {
    permissions() {
      return this.$store.getters && this.$store.getters.permissions;
    },
    // 当前栏目id
    channelId() {
      return this.columnRow.channelId;
    },
    filteredData() {
      return this.allUserList.filter((item) => {
        return (
          item.name.indexOf(this.query) > -1 ||
          item.loginId.indexOf(this.query) > -1
        );
      });
    },
  },
  created() {
    this.getDicts("article_type")
      .then((response) => {
        this.articleOption = response.data;
      })
      .then(() => {
        this.getArticleList();
      });

    this.getArticleStatus();
    this.getDicts("channel_flow_set").then((response) => {
      this.flowOptions = response.data.filter((item) => {
        return item.status == "0";
      });
    });
  },

  mounted() {
    document.addEventListener("visibilitychange", this.Fnrefresh);
  },

  watch: {
    channelId(val, a) {
      // 由父组件触发
      // fixed: 点击相同栏目  触发重置
      // this.resetQuery();
    },
    value7(value) {
      if (value) {
        this.$refs.xTree_article.setAllTreeExpand(true);
      } else {
        this.$refs.xTree_article.clearTreeExpand();
        this.$nextTick(() => {
          this.$refs.xTree_article.setTreeExpand(this.siteList[0], true);
        });
      }
    },
  },

  methods: {
    Fnrefresh() {
      let route = this.$route.path;

      if (!document.hidden) {
        if (refreshRouteArr.includes(route)) {
          this.getArticleList();
        }
      }
    },
    /** 获取文章列表 */
    getArticleList() {
      // localStorage.setItem("articleFlag", false);
      this.loading = true;
      this.queryParams.channelId = this.channelId;
      getListArticle(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          response.data.list?.map((item) => {
            item.time = new Date(item.time);
            item.timeCacha = new Date(item.time);
            item.show = false;
          });
          this.articleList = response.data.list;
          this.total = response.data.totalCount;
          this.loading = false;
        }
      );
      // .then(() => {
      //   this.$nextTick(() => {
      //     this.Tbheight = this.$refs.el_table.clientHeight;
      //     console.log("this.Tbheight:表格高度 ", this.Tbheight);
      //   });
      // });
    },
    async getCloumnList() {
      await getChannelListForTree({ siteId: this.siteRow.siteId }).then(
        (res) => {
          this.siteRow.children = res.data;
          this.siteRow.root = "111";
          this.leftList = [this.siteRow];
        }
      );
    },
    async getCloumnList_bak() {
      await getChannelListForTree({ siteId: this.siteRow.siteId }).then(
        (res) => {
          this.siteRow.children = this.handleTree(res.data, "channelId").filter(
            (item) => item.parentId == this.siteRow.siteId
          );
          this.siteRow.root = "111";
          this.leftList = [this.siteRow];
        }
      );
    },

    //文章移动  文章复制
    /**
     * 不能调用  站点接口，，会导致左侧站点布局紊乱，直接从index获取props这样没问题
     *
     */
    async handleCopy(title) {
      if (this.articleIds.length == 0 && title != "共享栏目流程设置") {
        this.msgError("请选择文章");
        return;
      }
      // if (this.leftList.length == 0) {
      //   await this.getCloumnList();
      // }
      // return;
      this.dialogCloumn = true;
      this.value7 = false;
      this.title = title;
      //展开第一个节点
      this.$nextTick(() => {
        this.$refs.xTree_article.setTreeExpand(this.siteList[0], true);
      });
    },
    //确认文章 移动 复制
    copySureArticle() {
      let selection = this.$refs.xTree_article.getCheckboxRecords();
      this.cloumnId = selection.map((item) => item.channelId);
      if (this.title == "文章复制") {
        this.copyArticle();
      } else if (this.title == "文章移动") {
        this.moveArticle();
      } else if (this.title == "共享栏目流程设置") {
        this.sureShareSet();
      } else if (this.title == "文章分享") {
        this.handleShare();
      }
    },

    //文章复制
    copyArticle() {
      articleCopy({
        articleIds: this.articleIds,
        channelIds: this.cloumnId.join(","),
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文章复制成功");
        }
        this.notInfo("若栏目栏布局紊乱，请重新进入站点。");
        this.getArticleList();
        this.cacle();
      });
    },
    //文章移动
    moveArticle() {
      if (this.cloumnId.length > 1) {
        alert("只能选择一个栏目");
        this.$refs.xTree_article.clearCheckboxRow();
        return;
      }
      articleMove({
        articleIds: this.articleIds,
        channelId: this.cloumnId.join(","),
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文章移动成功");
        }
        this.notInfo("若栏目栏布局紊乱，请重新进入站点。");
        this.getArticleList();
        this.cacle();
      });
    },

    //栏目移动  栏目复制  按钮
    async handleChnnelCopy(title) {
      this.dialogChannel = true;
      this.value7 = false;
      this.title = title;
      //展开第一个节点
      this.$nextTick(() => {
        this.$refs.xTree_article.setTreeExpand(this.siteList[0], true);
      });
    },
    // 确认 栏目移动 复制的方法
    copySureChannel() {
      let selection = this.$refs.xTree_article.getRadioRecord();
      this.cloumnId = selection.channelId || selection.siteId;
      if (this.title == "栏目复制") {
        this.copyChannel();
      } else if (this.title == "栏目移动") {
        this.moveChannel();
      }
    },
    copyChannel() {
      let withArticle = 0;
      new Promise((res) => {
        this.$confirm("是否要同时复制栏目下已发布的文章?", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
          .then(() => {
            withArticle = 1;
            res();
          })
          .catch(() => {
            withArticle = 0;
            res();
          });
      }).then(() => {
        channelCopy({
          channelId: this.channelId, //当前栏目id
          parentId: this.cloumnId, // 当前选中的栏目
          siteId: this.siteRow.siteId,
          withArticle,
        }).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("栏目复制成功");
          }
          this.notInfo("若栏目栏布局紊乱，请重新进入站点。");
          this.$emit("haldleClickSite");
          this.cacle();
        });
      });
    },
    moveChannel() {
      channelMove({
        channelId: this.channelId, //当前栏目id
        parentId: this.cloumnId, // 当前选中的栏目
        siteId: this.siteRow.siteId,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("栏目移动成功");
        }
        this.notInfo("若栏目栏布局紊乱，请重新进入站点。");
        this.$emit("haldleClickSite");

        this.cacle();
      });
    },
    //文章共享
    handleShare() {
      const articleIds = this.articleIds;
      if (!articleIds) {
        this.msgError("请选择文章");
        return;
      }
      shareArticle({
        articleIds: articleIds,
        channelIds: this.cloumnId.join(","),
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文章操作成功");
        }
        // this.notInfo("若栏目栏布局紊乱，请重新进入站点。");
        this.getArticleList();
        this.cacle();
      });
    },
    //取消共享
    handleCancleShare() {
      const articleIds = this.articleIds;

      deleteArticleRelevance({ articleIds: articleIds }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文章操作成功");
        }
        // this.notInfo("若栏目栏布局紊乱，请重新进入站点。");
        this.getArticleList();
      });
    },
    // 复制 移动关闭前
    handleCloseDialog(done) {
      this.cacle();
      done();
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleTop":
          this.handleTop(row);
          break;
        case "handleCacleTop":
          this.handleTop(row);
          break;
        case "copyArticleUrl":
          this.copyArticleUrl(row);
          break;
        case "handleExportWorkflow":
          this.handleExportWorkflow(row);
          break;
        default:
          break;
      }
    },
    // 导出文章流程
    handleExportWorkflow(row) {
      const articleIds = row.articleId || this.articleIds;

      if (!articleIds) {
        this.msgError("请选择文章");
        return;
      }
      this.$confirm("您确定要导出文章流程吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getArticleWorkFlowExport({ articleIds: articleIds }).then((res) => {
            console.log("res: ", res);
            if (res.code == 200) {
              this.resolveHref(res.url, "文章审核记录");
            }
          });
        })
        .catch(() => {
          return;
        });
    },
    // 运城打包下载
    handlePkgDown(row) {
      const articleIds = row.articleId || this.articleIds;
      if (!articleIds) {
        this.msgError("请选择文章");
        return;
      }

      this.pckDownForm = {
        articleIds,
        fileName: undefined,
        type: "0",
      };
      this.pkgDownOpen = true;
      this.title = "请设置文档下载的有关属性";
    },
    // 运城打包下载  确认
    pkgDownSubmit() {
      this.downLoadZip(
        "/yuncheng/package/download",
        this.pckDownForm,
        "zip",
        this.pckDownForm.fileName
      );
      this.pkgDownOpen = false;
      return;
      getPckDown(this.pckDownForm).then((res) => {
        console.log("res: ", res);
      });
    },
    //查看文章共享到了哪些栏目
    shareView(row) {
      this.shareChannelList = [];
      const articleId = row.articleId;
      seeArticleSharedChannels({ articleId: articleId }).then((res) => {
        this.shareChannelList = res.data;
      });
    },
    //共享栏目流程设置
    sureShareSet() {
      if (this.cloumnId.length == 0) {
        this.msgError("请选择栏目");
        return;
      }
      shareWFToOtherChannel({
        cIds: this.cloumnId.join(","),
        channelId: this.columnRow.channelId,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("共享流程成功");
        }
        this.cacle();
      });
    },
    //新建文章
    handleAdd(row) {
      let { href } = this.$router.resolve({
        path: "/article/addarticle",
        query: {
          articleId: row.articleId || null,
          channelId: this.columnRow.channelId,
          siteId: this.siteRow.siteId,
          siteAlias: this.siteRow.alias,
          workflowId: this.workflowId || this.columnRow.workflowId,
        },
      });
      window.open(href, "_blank");
    },
    //编辑按钮
    handleEdit(row) {
      let { href } = this.$router.resolve({
        path: "/article/addarticle",
        query: {
          articleId: row.articleId || null,
          workflowStatuId: row.workflowStatuId || null,
          channelId: this.columnRow.channelId,
          workflowId: this.columnRow.setWorkflowId,
          siteId: this.siteRow.siteId,
          siteAlias: this.siteRow.alias,
        },
      });
      window.open(href, "_blank");
    },
    //文章上移
    handleUp(index, row) {
      this.currentRowIndex = index;

      if (index == 0) {
        return;
      }
      this.otherCloumn = this.articleList[index - 1];
      moveUpArticle({
        articleId: row.articleId,
        time: this.otherCloumn.time,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文章移动成功");
        }
        this.getArticleList();
        this.cacle();
      });
    },
    //文章下移
    handleDown(index, row) {
      this.currentRowIndex = index;
      if (index == this.articleList.length - 1) {
        return;
      }
      this.otherCloumn = this.articleList[index + 1];

      moveDownArticle({
        articleId: row.articleId,
        time: this.otherCloumn.time,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文章移动成功");
        }
        this.getArticleList();
        this.cacle();
      });
    },
    //删除按钮
    handleDel(row) {
      const articleIds = row.articleId || this.articleIds;
      if (!articleIds) {
        this.msgError("请选择文章");
        return;
      }
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          articleRemove({ articleIds: articleIds }).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("文章删除成功");
            }
            this.getArticleList();
            this.cacle();
          });
        })
        .catch(() => {
          return;
        });
    },
    //设置文章置顶
    handleTop(row) {
      const articleIds = row.articleId || this.articleIds;
      if (!articleIds) {
        this.msgError("请选择文章");
        return;
      }
      articleSetTop({
        articleId: articleIds,
        type: row.setTop == 0 ? 1 : 0,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文章操作成功");
        }
        this.getArticleList();
        this.cacle();
      });
    },
    // 设置文字弹出
    handleJump(row) {
      const articleIds = row.articleId || this.articleIds;
      if (!articleIds) {
        this.msgError("请选择文章");
        return;
      }
      articleSetJump({
        articleId: articleIds,
        type: row.jump == 0 ? 1 : 0,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文章操作成功");
        }
        this.getArticleList();
        this.cacle();
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      console.log("queryParams: ", queryParams);
      this.$confirm("是否确认导出所有文章数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return exportArticle(queryParams);
        })
        .then((response) => {
          this.resolveBlob(response, "xlsx", "文章列表");
        })
        .catch(() => {});
    },
    //设置排序文章时间
    handleArticleTimeChange(row) {
      console.log(
        "🚀 ~ file: article.vue ~ line 956 ~ handleArticleTimeChange ~ row",
        row
      );
      let str = row.time
        ? "此操作将对文章进行排序, 是否继续?"
        : "此操作将重置文章排序时间, 是否继续?";
      row.time = row.time || row.createdDate;
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setArticleSeqTime({
            articleId: row.articleId,
            time: row.time,
          }).then((res) => {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getArticleList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
          row.time = row.timeCacha;
        });
    },
    //流程设置
    handleSet() {
      workFlowConfig(this.columnRow.channelId).then((res) => {
        if (res.code == 200) {
          this.workflowDetail = res.data;
          this.drawer_setting = true;
        }
      });
    },
    //移入获取用户信息
    enterUser(item) {
      this.userId = item.userId;
      getUser(item.userId).then((res) => {});
    },
    //配置人员   获取全部可选人员
    setFlowPeople(item) {
      this.setWorkFlowDetail = item;
      workflowUserList({
        channelId: this.columnRow.channelId,
        siteId: this.siteRow.siteId,
        workflowStatusId: item.workflowStatusId,
      }).then((res) => {
        if (res.code == 200) {
          //只有可选人员。不用回显
          // let selected = this.setWorkFlowDetail.personVoList.map((item) => {
          //   return item.userId;
          // });
          // this.checkUserList = selected;
          this.allUserList = res.data;
          this.dialogUser = true;
          this.title = "流程设置";
        }
      });
    },
    //保存流程定义人员
    sureSetFlowPeople() {
      let users = this.checkUserList.join(",");
      if (!users) {
        this.msgError("请选择人员名单");
        return;
      }

      saveWorkflowUser({
        channelId: this.columnRow.channelId,
        workflowStatusId:
          this.setWorkFlowDetail
            .workflowStatusId /**当前流程状态 id  eg 审核id。发布id */,
        workflowId: this.setWorkFlowDetail.workflowId /**流程id */,
        users,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("配置成功");
          this.handleSet();
        }
        this.cacle();
      });
    },
    //共享流程到其他栏目   选择栏目
    setShareFlow() {
      this.handleCopy("共享栏目流程设置");
    },
    //draw_set 关闭之前
    handleClose(done) {
      this.$confirm("确认关闭流程设置窗口吗？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //删除流程中的人员
    delUser(user, item) {
      moveUserFormWF({
        channelId: this.columnRow.channelId,
        users: user.userId,
        workflowId: item.workflowId,
        workflowStatusId: item.workflowStatusId,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("人员删除成功");
          this.handleSet();
        }
      });
    },
    //保存流程
    saveLiuchengSet() {
      if (this.setWorkflowId)
        saveNewWorkflow({
          channelId: this.columnRow.channelId,
          workflowId: this.setWorkflowId,
        }).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("流程配置成功");
            this.handleSet();
            this.$emit("update:workflowId", this.setWorkflowId);
          }
        });
    },
    //文章标题跳转文章页面
    getArticleUrl(row) {
      articleViewUrl({
        articleId: row.articleId,
      }).then((res) => {
        let href = res.msg;
        window.open(href, "_blank");
      });
    },
    cacle() {
      // 文章复制 文章移动
      this.dialogCloumn && this.$refs.xTree_article.clearCheckboxRow();
      this.dialogCloumn = false;
      // 栏目复制 栏目移动
      this.dialogChannel && this.$refs.xTree_article.clearRadioRow();
      this.dialogChannel = false;
      this.dialogUser = false;
      //取消 栏目选择
      this.$nextTick(() => {});
      this.reset();
    },
    // 表单重置
    reset() {
      this.cloumnId = [];
      this.checkUserList = [];
      this.query = "";
      this.articleIds = "";
      this.setWorkflowId = undefined;
      this.$refs.multipleTable.clearSelection();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams = {
        showType: "2",
        loginId: undefined,
        header: undefined,
        author: undefined,
        pageNum: 1,
        pageSize: 10,
      };
      this.handleQuery();
    },
    // 文章状态字典翻译
    articleStatusFormat(row) {
      return this.selectDictLabel(
        this.articleStatusOption,
        row.workflowStatuId
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getArticleList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.articleIds = selection.map((item) => item.articleId).join(",");
    },
    selectFn(row, index) {
      if (row.relevance == 2) {
        return false;
      }
      return true;
    },
    //复选框方法，disable第一行的
    checkMethod({ row }) {
      return row.channelId && row.channelId != this.channelId;
    },
    handleClick(row) {
      row.show = true;
      this.rowSequenceCache = row.sequence;
      this.$nextTick(() => {
        this.$refs.sequence.focus();
      });
    },
    commitSequence(row) {
      setArticleSequence({
        articleId: row.articleId,
        sequence: row.sequence,
      }).then((res) => {
        row.show = false;
        this.getArticleList();
      });
    },
    quxiaoSequence(row) {
      row.sequence = this.rowSequenceCache;
      row.show = false;
    },
    // 动态给表格设置样式
    tableRowClassName({ row, rowIndex }) {
      if (row.setTop == "1") {
        return "article-top-row";
      }
      return "";
    },
    // 表格右键方法
    handleRowContextmenu(row, column, event) {
      // 阻止右键默认行为
      event.preventDefault();

      //点击鼠标右键触发
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.setCurrentRow();
      this.menuVisible = true;
      this.$refs.multipleTable.toggleRowSelection(row, true);
      console.log(
        "🚀 ~ file: article.vue:1229 ~ handleRowContextmenu ~ this.$refs.contextbutton",
        this.$refs
      );
      //  let obj =  getAbsolutePos(this.$refs.contextbutton)
      //  console.log("🚀 ~ file: article.vue:1229 ~ handleRowContextmenu ~ obj", obj)

      // this.$refs.contextbutton.style.left = x+'px'
      // this.$refs.contextbutton.style.top = x+'px'
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo);
    },
    handleMenu(item) {
      console.log("🚀 ~ file: article.vue:1223 ~ handleMenu ~ item", item);
      //快速选择菜单
      const value = item.value;
      const command = item.command;
      //点击菜单内容触发操作
    },
    // 复制调用的方法
    copyArticleUrl(row) {
      articleViewUrl({
        articleId: row.articleId,
      }).then((res) => {
        let href = res.msg;
        this.$copyText(href).then(
          (res) => {
            this.msgSuccess("复制成功！");
          },
          (err) => {
            this.msgError("复制失败！");
          }
        );
      });
    },
    // 获取文章状态
    getArticleStatus() {
      // 不用字典获取了。
      // this.getDicts("article_status").then((response) => {
      //   this.articleStatusOption = response.data;
      // });

      articleStatusList().then((res) => {
        console.log("res: ", res);
        let object = res.data;
        let data = [];
        for (const key in object) {
          if (Object.hasOwnProperty.call(object, key)) {
            const item = object[key];
            data.push({
              dictLabel: item,
              dictSort: key,
              dictType: "article_status",
              dictValue: String(key),
              remark: item,
              status: key,
            });
          }
        }

        this.articleStatusOption = data;
      });
    },
  },
  destroyed() {
    document.removeEventListener("visibilitychange", this.Fnrefresh);
  },
};
</script>

<style scoped lang="scss">
.article_content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bottom {
  display: flex;
  // height: 500px;
  height: 50vh;
  .bottom_l {
    // overflow: auto;
    flex: 1;
    height: 100%;
    // background: #fffbf0 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      .el-checkbox {
        width: 50%;
        margin-right: 0;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  // .bottom_r {
  //   flex: 1;
  //   overflow: auto;
  //   background: #fbfeff;
  //   padding: 0 0 0 30px;
  // }
}
.reset-steps {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: auto;
  // :first-child {
  //   .set {
  //     display: none !important;
  //   }
  // }
  .step-item {
    min-height: 60px;
    height: auto;
    position: relative;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    border: 1px dashed #ccc;
    .name {
      display: inline-block;
      height: 100%;
      // min-width: 300px;
      width: auto;
      margin-right: 20px;
    }
    .set {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: flex-start;

      .userList {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        justify-content: flex-end;
        align-items: center;
        // max-height: 500px;
        // overflow: auto;
        li {
          cursor: pointer;
          color: blue;
          // width: 50%;
          // line-height: 30px;
          // height: 30px;
        }
        i {
          // width: 50%;
        }
      }
    }
    &:after {
      content: "";
      height: 40px;
      width: 3px;
      background: red;
      position: absolute;
      left: 20px;
      bottom: 0px;
    }
    &:before {
      content: "";
      border: 10px solid transparent;
      border-top-color: #f00;
      width: 10px;
      height: 10px;
      position: absolute;
      bottom: 10px;
      left: 11px;
      transform: translateY(20px);
    }
    &:last-child:after,
    &:last-child:before {
      display: none;
    }
  }
  .step-item2 {
    min-height: 60px;
    height: auto;
    position: relative;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    border: 1px dashed #ccc;
    .name {
      display: inline-block;
      height: 100%;
      // min-width: 300px;
      width: auto;
      margin-right: 20px;
    }
    .set {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: flex-start;

      .userList {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        justify-content: flex-end;
        align-items: center;
        // max-height: 500px;
        // overflow: auto;
        li {
          cursor: pointer;
          color: blue;
          // width: 50%;
          // line-height: 30px;
          // height: 30px;
        }
        i {
          // width: 50%;
        }
      }
    }
  }
  .lineActive {
    background-color: #1e4b9f;
  }
}
.set_top {
  // min-height: 40%;
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.set_bottom {
  height: 165px;
  padding: 20px;
}
.el-popover {
}

.icon_guanbi {
  color: red;
}
.icon_wancheng {
  color: blue;
}

.el-date-editor.el-input.el-date-editor--datetime {
  border-right: none;
  width: 190px;
  ::v-deep .el-input__inner {
    padding-right: 0;
  }
}
::v-deep .el-table {
  position: relative;
}
::v-deep .article-top-row {
  background: rgb(243, 243, 243);
}
.share-channel-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  .channel-name {
    width: 30%;
    text-align: center;
    margin: 4px 0;
  }
  i {
    width: 30%;
  }
}
</style>
